import React, { Fragment } from "react";
// 链接主仓库
import { connect } from 'react-redux'
import { actionCreators } from "./store";
import { DetailCon } from "./style";


class Details extends React.Component {
  render() {
    return (
      <Fragment>
        <DetailCon>
          <div className="title">
            <h1>{this.props.detailContent.get('title')}</h1>
          </div>
          <div dangerouslySetInnerHTML={{ __html: this.props.detailContent.get('content') }} className="content"></div>
        </DetailCon>
      </Fragment >
    )
  }
  componentDidMount() {
    this.props.getDetailContent()
  }
}

const mapState = (state) => ({
  detailContent: state.getIn(['detail', 'detailContent'])
})

const mapDispatch = (dispatch) => ({
  getDetailContent() {
    dispatch(actionCreators.getInitDetailContent())
  }
})

export default connect(mapState, mapDispatch)(Details)